import {PageWrapperBox, SearchFormBox, TableContainerBox} from "@/layout/Page";
import {Button, Dropdown, Flex, Form, Input, Select, Space, Table, TableColumnProps} from "antd";
import {selectOptions} from "@/components/DictTag";
import {DownloadOutlined, DownOutlined, PlusOutlined, RedoOutlined, SearchOutlined} from "@ant-design/icons";
import {getArticlePageUrl} from "@/api/blog/article.ts";
import {useEffect, useRef, useState} from "react";
import {useNavigate} from "react-router-dom";
import {ColumnsType} from "antd/es/table";
import {getRoleListUrl} from "@/api/system/role.ts";
import useGetDict from "@/hooks/useGetDict.ts";
import EditDialog from "./editDialog.tsx";

export default function () {

    const [data, setData] = useState([])
    const [loading, setLoading] = useState(false)
    const [total, setTotal] = useState(0)
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const [queryParams, setQueryParams] = useState({
        pageNum: 1,
        pageSize: 10,
    })


    const dictData = useGetDict("status")

    const editDialogRef = useRef<any>(null)

    function getTableDateList() {
        setLoading(true)
        getRoleListUrl({
            ...queryParams,
            ...form.getFieldsValue()
        }).then((res: any) => {
            setData(res.rows)
            setTotal(res.total)
            setLoading(false)
        })
    }

    const handleRefresh = () => {
        form.resetFields()
        getTableDateList()
    }

    useEffect(() => {
        getTableDateList()
    }, []);

    const columns:  ColumnsType<any> = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            align: 'center',
            render: (text, record, index) => {
                return index + 1
            }
        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
            key: 'roleName',
            ellipsis: true,
            align: "center",
            minWidth: 160,
        },
        {
            title: '权限字符',
            dataIndex: 'roleKey',
            key: 'roleKey',
            ellipsis: true,
            align: "center",
            minWidth: 160,
        },
        {
            title: '显示顺序',
            dataIndex: 'sort',
            key: 'roleKey',
            ellipsis: true,
            align: "center",
            minWidth: 160,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            ellipsis: true,
            align: "center",
            minWidth: 160,
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            ellipsis: true,
            width: 160,
            align: "center",
            render: (text, record, index) => {
                if(record.roleId === 1){
                    return <></>
                }
                return <Space key={index}>
                    <Dropdown
                        menu={{
                            items: [
                                {
                                    key: "1", label: "数据权限", onClick: () => {
                                        navigate(`/system/role/assigningPermissions`)
                                    }
                                },
                                {
                                    key: "2", label: "分配用户", onClick: () => {
                                        navigate(`/blog/articles/edit/${record.artId}`)
                                    },
                                }
                            ]
                        }}
                    >
                        <a>更多<DownOutlined style={{marginLeft: 2, fontSize: 12}}/></a>
                    </Dropdown>
                    <a>编辑</a>
                    <a className={"text-red"}>删除</a>
                </Space>
            }
        }
    ]

    return <PageWrapperBox>
        <SearchFormBox>
            <Form form={form} layout={"inline"} colon={false}>
                <Form.Item name="artTitle" label="角色名称">
                    <Input placeholder="请输入角色名称"></Input>
                </Form.Item>
                <Form.Item name={"artCategoryId"} label="权限字符">
                    <Input  placeholder="请输入权限字符"></Input>
                </Form.Item>
                <Form.Item name={"status"} label="状态">
                    <Select style={{width: 120}} placeholder="请选择状态">
                        {selectOptions(dictData.status)}
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button icon={<SearchOutlined/>} type="primary" onClick={getTableDateList}>查询</Button>
                        <Button icon={<RedoOutlined/>} onClick={handleRefresh}>重置</Button>
                    </Space>
                </Form.Item>
            </Form>
        </SearchFormBox>

        <TableContainerBox>
            <Flex align="center" gap="small" style={{marginBottom: 6}}>
                <Button icon={<PlusOutlined/>} type="primary"
                        onClick={() => editDialogRef.current.openModal()}> 新增</Button>
            </Flex>
            <Table
                rowKey="roleId"
                loading={loading}
                tableLayout="auto"
                dataSource={data}
                columns={columns}
                scroll={
                    {x: 'auto'}
                }
                pagination={{
                    pageSizeOptions: ['10', '20', '30', '40'],
                    showSizeChanger: true,
                    showTotal: () => `共 ${total} 条数据`,
                    total: total,
                    defaultPageSize: 10,
                    defaultCurrent: 1,
                    onChange: (page, pageSize) => {
                        setQueryParams({pageNum: page, pageSize: pageSize})
                    },
                }}
            >
            </Table>
        </TableContainerBox>
        <EditDialog ref={editDialogRef} getList={getTableDateList}/>
    </PageWrapperBox>
}
